<template>
  <div>

    <h3 align="center">车辆管理</h3>
    <el-button type="primary" @click="add" size="mini">新增行驶证</el-button>
    <el-button type="warning" @click="isShowChangePassword = true" size="mini">修改密码</el-button>
    <el-button type="danger" @click="isShowPhone = true" size="mini">更改绑定的手机</el-button>
    <el-table :data="dataList" style="width: 100%">
      <el-table-column label="行驶证号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.travelCarId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车牌号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.carNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车俩类型">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.carClazz }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行驶证所有人">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cardId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用性质">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userNature }}</span>
        </template>
      </el-table-column>
      <el-table-column label="品牌型号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.brandModel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆识别代号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.vin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发动机号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.engineNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效日期">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.invalidDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="档案号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fileNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行驶证状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--          <el-button size="mini" @click="update(scope.row)">编辑</el-button>-->
          <el-button size="mini" type="warning" @click="isShowTransfer = true">过户</el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <!-- page-size 默认每页显示条数-->
      <el-pagination
        @size-change="selectPage"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="rows"
        layout="jumper,total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>

    </div>

    <!-- 新增对话框 -->
    <el-dialog :title="title" :visible.sync="isShowAdd" width="30%">
      <el-form ref="form" label-width="80px">
        <input type="hidden" v-model="addForm.id"/>
        <br>
        <el-form-item label="行驶证号">
          <el-col :span="22">
            <el-input placeholder="请输入行驶证号" v-model="addForm.travelCarId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-col :span="22">
            <el-input placeholder="请输入车牌号" v-model="addForm.carNo"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车俩类型">
          <el-col :span="22">
            <el-input placeholder="请输入车俩类型" v-model="addForm.carClazz"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="行驶证所有人">
          <el-col :span="22">
            <el-input placeholder="请输入行驶证所有人" v-model="addForm.cardId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="使用性质">
          <el-col :span="22">
            <el-input placeholder="请输入使用性质" v-model="addForm.userNature"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="品牌型号">
          <el-col :span="22">
            <el-input placeholder="请输入品牌型号" v-model="addForm.brandModel"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车辆识别代号">
          <el-col :span="22">
            <el-input placeholder="请输入车辆识别代号" v-model="addForm.vin"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="发动机号">
          <el-col :span="22">
            <el-input placeholder="请输入发动机号" v-model="addForm.engineNo"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="失效日期">
          <el-col :span="22">
            <el-date-picker v-model="addForm.invalidDate" type="datetime" placeholder="选择失效日期"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="档案号">
          <el-col :span="22">
            <el-input placeholder="请输入档案号" v-model="addForm.fileNo"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="行驶证状态">
          <el-col :span="22">
            <el-input placeholder="请输入行驶证状态" v-model="addForm.state"></el-input>
          </el-col>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAdd = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 过户对话框 -->
    <el-dialog title="过户" :visible.sync="isShowTransfer" width="30%">
      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="行驶证号">
          <el-col :span="22">
            <el-input placeholder="请输入行驶证号" v-model="transferForm.travelCarId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-col :span="22">
            <el-input placeholder="请输入车牌号" v-model="transferForm.carNo"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowTransfer = false">取 消</el-button>
        <el-button type="primary" @click="saveTransfer()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" :visible.sync="isShowChangePassword" width="30%">
      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="身份证号">
          <el-col :span="22">
            <el-input placeholder="请输入行驾驶员身份证号" v-model="changePasswordForm.cardId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-col :span="22">
            <el-input placeholder="请输入登录密码" v-model="changePasswordForm.password"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowChangePassword = false">取 消</el-button>
        <el-button type="primary" @click="changePassword()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 绑定手机对话框 -->
    <el-dialog title="更改绑定的手机号" :visible.sync="isShowPhone" width="30%">
      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="身份证号">
          <el-col :span="22">
            <el-input placeholder="请输入行驾驶员身份证号" v-model="phoneForm.cardId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号">
          <el-col :span="22">
            <el-input placeholder="请输入需要绑定的手机号" v-model="phoneForm.phone"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowPhone = false">取 消</el-button>
        <el-button type="primary" @click="savePhone()">保存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: "vehicle",
  data() {
    return {
      dataList: [],
      title: "新增",
      //表单请求对象
      addForm: {
        id: "",
        travelCarId: "",
        carNo: "",
        carClazz: "",
        cardId: "",
        userNature: "",
        brandModel: "",
        vin: "",
        engineNo: "",
        invalidDate: "",
        fileNo: "",
        state: ""
      },
      total: 0, //总条数
      totalPage: 0, //总页数
      curPage: 1, //当前页
      rows: 5, //每页显示条数,
      isShowAdd: false,
      //过户
      transferForm: {
        travelCarId: "",
        carNo: ""
      },
      isShowTransfer: false,
      //修改密码
      changePasswordForm: {
        cardId: "",
        password: ""
      },
      isShowChangePassword: false,
      //绑定手机
      phoneForm: {
        cardId: "",
        phone: ""
      },
      isShowPhone: false
    }
  },
  methods: {
    //加载数据
    loaddata() {
      var mythis = this;
      $.ajax({
        url: "http://localhost:8080/api/page/list",
        type: "get",
        data: {
          "currentPage": mythis.curPage,
          "pageSize": mythis.rows
        },
        dataType: "json",
        success: function (data) {
          console.log(data)
          mythis.dataList = data.records;
          mythis.total = data.total;
          mythis.totalPage = data.pages
        }
      })
    },
    //新增行驶证
    add() {
      //显示模态框
      this.isShowAdd = true;
      //更改模态框的标题
      this.title = "新增";
      //清除表单元素
      this.clearForm();
    },
    //保存过户
    saveTransfer() {
      var mythis = this;
      $.ajax({
        url: "http://localhost:8080/api/updateCar",
        type: "put",
        contentType: "application/json",
        data: JSON.stringify(mythis.transferForm),
        dataType: "json",
        success: function (data) {
          console.log(data)
          mythis.$message("保存成功")
          //关闭模态框
          mythis.isShowTransfer = false;
          //刷新
          mythis.loaddata();
        },
        error: function (e) {
          console.log(e);
        }
      })
    },
    //修改密码
    changePassword() {
      var mythis = this;
      $.ajax({
        url: "http://localhost:8080/api/updateDriverPassword",
        type: "put",
        contentType: "application/json",
        data: JSON.stringify(mythis.changePasswordForm),
        dataType: "json",
        success: function (data) {
          console.log(data)
          mythis.$message("修改成功")
          //关闭模态框
          mythis.isShowChangePassword = false;
        },
        error: function (e) {
          console.log(e);
        }
      })
    },
    //绑定手机号
    savePhone() {
      var mythis = this;
      $.ajax({
        url: "http://localhost:8080/api/updateTelByCardId",
        type: "put",
        contentType: "application/json",
        data: JSON.stringify(mythis.phoneForm),
        dataType: "json",
        success: function (data) {
          console.log(data)
          mythis.$message("绑定成功")
          //关闭模态框
          mythis.isShowPhone = false;
        },
        error: function (e) {
          console.log(e);
        }
      })
    },
    //保存
    saveInfo() {
      var mythis = this;
      var invalidDate = mythis.addForm.invalidDate;
      if (invalidDate) {
        var d = new Date(invalidDate);
        var dataTime = d.getFullYear() + '-' + mythis.fix((d.getMonth() + 1), 2) + '-' + mythis.fix(d.getDate(), 2) + ' ' + mythis.fix(d.getHours(), 2) + ':' + mythis.fix(d.getMinutes(), 2) + ':' + mythis.fix(d.getSeconds(), 2);
        mythis.addForm.invalidDate = dataTime;
      }

      $.ajax({
        url: "http://localhost:8080/api/addCar",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify(mythis.addForm),
        dataType: "json",
        success: function (data) {
          mythis.$message("保存成功")
          //关闭模态框
          mythis.isShowAdd = false;
          //刷新
          mythis.loaddata();
        },
        error: function (e) {
          console.log(e);
        }
      })
    },
    //删除
    delInfo(row) {
      var mythis = this;
      this.$confirm("你确定要删除数据吗?").then(function () {
        $.ajax({
          url: "http://localhost:8080/api/delCar/" + row.travelCarId,
          type: "delete",
          dataType: "json",
          success: function (data) {
            mythis.$message("删除成功")
            //刷新
            mythis.loaddata();
          }
        })
      });
    },
    //用户选择页数
    selectPage(v) {
      this.rows = v;
      this.loaddata();
    },
    //当前页触发事件
    handleCurrentChange(v) {
      this.curPage = v;
      this.loaddata();
    },
    //清空表单
    clearForm() {
      this.addForm = {
        id: "",
        travelCarId: "",
        carNo: "",
        carClazz: "",
        cardId: "",
        userNature: "",
        brandModel: "",
        vin: "",
        engineNo: "",
        invalidDate: "",
        fileNo: "",
        state: ""
      }
    },
    //时间处理
    fix(num, length) {
      return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
    }
  },
  mounted() {
    this.loaddata();
    console.log(this.$route.query.info)
  }

}
</script>

<style>
</style>
